{% extends "forum/forum_home.html" %}
{% block page_link %}

{% endblock %}

{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        .data_num {
            display: inline-block;
            color: #0b0b0b;
        }

        .forum_title a:link {
            color: blue;
        }

        /*.forum_title a:visited {*/
        /*    color:red;*/
        /*}*/
        .forum_title a:hover {
            text-decoration: underline;
        }

        .forum_title a {
            font-size: 18px;

        }
        ul li {
            list-style: none;
        }

        .jjj {
            color: red;
        }

        #div a:hover {
            text-decoration: underline;
        }

    </style>
{% endblock %}
{% block right_content %}
    <div style="padding: 3px 10px 3px 20px; border-bottom: #a6a9ad solid 1px; width: 100%; position: fixed; background: #e8edf4">
        <div id="all_posts" style="display: inline-block; cursor: pointer;line-height: 38px"><a
                href="forum_home">首页</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="my_posts" style="display: inline-block; cursor: pointer;"><a
                href="forum_release_view">我的发帖</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="my_likes" style="display: inline-block; cursor: pointer;"><a
                href="forum_like_view">我的点赞</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="my_collect" style="display: inline-block; cursor: pointer;">
            <a class="jjj" href="forum_collection_view">我的收藏</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="competitive_page" style="display: inline-block; cursor: pointer;">
            <a href="forum_competitive_view">精品文章</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="popular_page" style="display: inline-block; cursor: pointer;">
            <a href="forum_popular_view">热门文章</a></div>
    </div>
    {#    首页#}
    <div style="height: 50px"></div>
    <div style="width:100%; height: auto;padding: 10px;">
        <ul>
            {% for obj in objs %}
                <li style="padding-top: 20px; border-bottom: #b3b3b3 dashed 1px" onmousemove="on_this(this)"
                    onmouseout="out_this(this)">
                    <div class="forum_title" style="padding-left: 20px">
                        <a href="forum_details?id={{ obj.id }}"
                           style="color: #121212;font-weight: bold; ">{{ obj.title }}</a>
                    </div>
                    {#        首页展示文章第一行内容#}
                    <div style="height: 75px;padding:0 20px 0 20px" id="article_body">
                        <p style="overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;word-wrap: break-word;">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ obj.content_text }}</p>
                    </div>
                    {#        首页展示发布人发布时间点赞数量评论数量#}
                    <div style="padding: 15px 15px 15px 20px">
                        <div style="display: inline-block; padding: 5px;line-height: 14px">
                            <div class="author_name" style="display: inline-block; color: #9195a3">
                                {{ obj.author.real_name }}
                            </div>
                            <div style="display: inline-block">&nbsp;&nbsp;&nbsp;&nbsp;</div>
                            <div class="update_time" style="display: inline-block; color: #9195a3;font-size: 14px">
                                {{ obj.create_time | date:"Y-m-d H:i" }}
                            </div>
                        </div>
                        <div style="display: inline-block; width: 75%;"></div>
                        <div style="display: inline-block;">
                            <div class="data_num" style="width: auto;height: auto; padding: 6px">
                                <img src="../../static/forum/img/未点赞.png" alt="" width="18px" height="18px">
                                <span>{{ obj.like_users.all.count }}</span>
                            </div>
                            <div class="data_num" style="width: auto;height: auto; padding: 6px">
                                <img src="../../static/forum/img/non_comment.png" alt="" width="18px" height="18px">
                                <span>{{ obj.articlecomment_set.all.count }}</span>
                            </div>
                        </div>
                    </div>
                </li>
            {% endfor %}
        </ul>
    </div>
{% endblock %}

{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("forum").className = "add_class";
            document.getElementById("main_page").className = "add-nav-active";
        };

        function on_this(this_is) {
            this_is.style.background = '#e3e3e3'
        }

        function out_this(this_is) {
            this_is.style.background = '#e8edf4'
        }
    </script>
{% endblock %}
